import Empty from "@/components/common/Empty.vue";
import { createApp } from "vue";

const createEmpty = (el: HTMLElement) => {
  if (el.querySelector("[data-v_empty]")) return;
  const empty = createApp(Empty);
  const fragment: any = document.createDocumentFragment();
  empty.mount(fragment);
  el.appendChild(fragment);
};
const destoryEmpty = (el: HTMLElement) => {
  const empty = el.querySelector("[data-v_empty]");
  if (!empty) return;
  el.removeAttribute("style");
  el.removeChild(empty);
};
export default {
  mounted(el: HTMLElement, binding) {
    if (binding.value) {
      destoryEmpty(el);
    } else {
      createEmpty(el);
    }
  },
  updated(el: HTMLElement, binding) {
    if (binding.value == binding.oldValue) return;
    if (binding.value) {
      destoryEmpty(el);
    } else {
      createEmpty(el);
    }
  }
};
